<template>
  <common-drawer :width="1000" :visible="visible" title="用户详情" @close="updateVisible(false)">
    <a-descriptions bordered :column="2" size="default">
      <a-descriptions-item label="用户ID">{{ state.form.custNo }}</a-descriptions-item>

      <a-descriptions-item label="状态">{{
    state.form.status === 'D' ? '封禁' : '正常'
  }}</a-descriptions-item>


      <a-descriptions-item label="注册时间">{{ state.form.regisTime }}</a-descriptions-item>
      <a-descriptions-item label="最近活跃时间">{{ state.form.loginTime }}</a-descriptions-item>
      <a-descriptions-item label="手机号">{{ state.form.mobile }}</a-descriptions-item>
      <a-descriptions-item label="昵称">{{ state.form.nickName }}</a-descriptions-item>
      <a-descriptions-item label="注册IP">{{ state.form.regisIp }}</a-descriptions-item>
      <a-descriptions-item label="最近登陆IP">{{ state.form.loginIp }}</a-descriptions-item>
    </a-descriptions>

    <a-collapse v-model:activeKey="activeKey" style="margin-top: 10px">
      <a-collapse-panel key="4" header="创建的智能体">
        <template v-for="  (item, index) in state.form.aiAgents" :key="index" style="display:flex flex-wrap: nowrap;">
          <div style="display: inline;margin-left: 10px;color: blue;cursor: pointer;" @click="openIntelligent(item)">
            {{ item.agentNo }}
          </div>
        </template>

      </a-collapse-panel>
    </a-collapse>
    <div style=" margin-top: 160px;margin-right:30px ;display: flex;
  justify-content: flex-end ">
      <a-button :disabled="state.form.status === 'D'" type="primary" @click="opneBan()"
        style="border-radius: 5px;padding:0 40px">
        {{ state.form.status === 'D' ? '解封' : '封禁' }}
      </a-button>
      <a-button type="primary" @click="openEsc()" :disabled="state.form.status === 'D'"
        style="margin-left: 40px;border-radius: 5px;padding:0 40px">注销</a-button>
    </div>
    <a-modal v-model:visible="isvisible" :title="state.form.status === 'D' ? '确认解封该账号？' : '确认封禁该账号？'"
      @ok="handleOk(state.form)">
      <!-- <a-radio-group v-model:value="statusOne">
        <a-radio value="Y">通过</a-radio>
        <a-radio value="S">驳回</a-radio>
      </a-radio-group> -->
      <!-- <a-textarea style="margin-top: 10px" v-model:value="approval" placeholder="请输入意见" auto-size /> -->
    </a-modal>
    <a-modal v-model:visible="isMiss" title="确认注销该账号" @ok="handleMiss(state.form)">
      <!-- <a-radio-group v-model:value="statusOne">
      <a-radio value="Y">通过</a-radio>
      <a-radio value="S">驳回</a-radio>
    </a-radio-group> -->
      <!-- <a-textarea style="margin-top: 10px" v-model:value="approval" placeholder="请输入意见" auto-size /> -->
    </a-modal>
  </common-drawer>

  <!-- 操作智能体详情 -->
  <ai-agent-detail v-model:visible="showIntelligent" :detail="currentlist" />
</template>

<script lang="ts" setup>
import { ref, reactive, watch, defineEmits } from 'vue';
import CommonDrawer from '/@/components/CommonDrawer/index.vue';
import { message } from 'ant-design-vue';
import { CustomerApi } from '/@/api/touch/customer/CustomerApi';
import AiAgentDetail from '../aiAgentCheck/aiAgent-detail.vue';
import { AiAgentApi } from '/@/api/touch/aiAgent/AiAgentApi';

const props = defineProps<{
  // 弹窗是否打开
  visible: Boolean;
  // 修改回显的数据
  detail?: Object;
}>();

const emits = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
}>();

const currentlist = ref<any>(null);
const showIntelligent = ref<boolean>(false)
const state = reactive({
  // 表单数据
  form: {},
});

const updateVisible = (value) => {
  emits('update:visible', value);
};
let approval = ref<string>('');
const isvisible = ref<boolean>(false)
const isMiss = ref<boolean>(false)
const activeKey = ref(['1', '2', '3', '4']);
const memoryColumns = ref([
  {
    title: '标签',
    dataIndex: 'style',
  },
  {
    title: '标签ID',
    dataIndex: 'tagStyleNo',
  },
]);
watch(
  () => props.detail,
  (val) => {
    if (val) {
      state.form = Object.assign({}, props.detail);
    }
  },
);
const opneBan = async () => {
  console.log('警用');
  isvisible.value = true

}
const openEsc = async () => {
  console.log('警注销');
  isMiss.value = true
}
const handleOk = async (row) => {
  try {
    let result = await CustomerApi.updateStatus({
      custNo: row.custNo, status: row.status === 'D' ? 'Y' : 'D'
    });
    console.log(result);
    message.success(result.message);
    isvisible.value = false
    state.form.status = 'D'
    console.log(state.form, '1 state.form');
    emits('child-event');
  } catch (err) {
    message.error(err);
  }

}
const handleMiss = async (row) => {
  try {
    let result = await CustomerApi.updateStatus({
      custNo: row.custNo, status: "N"
    });
    console.log(result);
    message.success(result.message);
    isMiss.value = false
    state.form.status = 'D'

    emits('child-event');
  } catch (error) {
    message.success(error);
  }

}
const openIntelligent = async (row: any) => {
  console.log(row, '1212');

  currentlist.value = await AiAgentApi.detail({ agentNo: row.agentNo });
  showIntelligent.value = true;
};
</script>